<template>
  <div class="study">
    <div class="con">
      <input type="text" class="searchText" placeholder="我要成为一名优秀的前端工程师">
      <a class="search">
        <img src="../../../src/images/search.png">
      </a>
    </div>
    <div class="classstyle">
      <div class="classLeft">
        <div v-for="(item,index) in config" :key="index" @click="btn(index)">
          <div class="studyName">{{ item.name }}</div>
        </div>
      </div>
      <div class="classRight">
        <div v-for="(items,index2) in study" :key="index2">
          <div class="rightname">{{ items.name }} ></div>
          <div class="rightclass">
            <div v-for="(itemstyle,index1) in items.children" :key="index1">
            {{ itemstyle.name }}
            </div>
          </div>
         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
let url = 'http://localhost:8080/static/data/tsconfig.json'
import Axios from 'axios'
Vue.prototype.$http = Axios
export default {

  name: 'hello',
  data () {
    return {
      config: [],
      study: []
    }
  },
  created () {
    console.log('我已经运行了', url)
    let self = this
    Axios.get(url).then(function (res) {
      self.config = res.data.result.frontCategoryDtoList
      self.study = self.config[0].children
      self.btn = function (index) {
        this.study = self.config[index].children
        console.log(this.study)
      }
      console.log(res.data.result.frontCategoryDtoList)
    })
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus">
  *
    margin 0
    padding  0
  .con
    width 100%
    height 40px
    border-bottom 1px solid #cccccc
    background  #ffffff
    position fixed
    left 0
    top 0 
    .searchText
      margin-top 7px
      margin-left 35px
      padding-left 15px
      width 260px
      height 25px
      border 0px
      border-radius 15px 15px
      background : rgba(0,0,0,0.1)
      color #ffffff
    .search img
      position absolute
      top 7px
      margin-left 10px
      width 20px
      height 20px
  .classstyle
    padding-top 40px
    display flex
    .classLeft 
      width 25%
      font-size 14px
      text-align center
      background-color #f2f2f2
      height 670px
      color #777777
      .studyName
        width 100%
        height 60px
        border-left : 3px solid green
        line-height 60px       
    .classRight
      padding-top 15px
      margin-left : 20px 
      width 100%
      color #444444
      .rightname
        font-size 14px
        line-height 50px
      .rightclass
        font-size 14px
        display flex
        flex-wrap : wrap
      .rightclass div
        margin 6px
        width 75px 
        font-size 12px
        text-align center
        line-height 30px
        height 30px
        border: 1px solid  #dddddd
        border-radius 20px

</style>
